<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论文管理系统 - 搜索论文</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <style>
        body {
            background-color: #f8f9fa; /* 淡灰色背景 */
        }
        .search-container {
            margin-top: 50px;
        }
    </style>
</head>
<body>

<div class="container search-container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title text-center">搜索论文</h3>
                </div>
                <div class="card-body">
                    <form id="searchForm">
                        <div class="form-group">
                            <label for="searchInput">论文标题或关键词</label>
                            <input type="text" class="form-control" id="searchInput" placeholder="输入搜索内容">
                        </div>
                        <button type="button" class="btn btn-primary btn-block" onclick="searchPaper()">搜索</button>
                    </form>
                    <div id="searchResults" class="mt-3">
                        <!-- 搜索结果将显示在这里 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript">
    function searchPaper() {
        var searchInput = $('#searchInput').val();
        if (searchInput.trim() === '') {
            alert('请输入搜索内容！');
            return;
        }

        // 这里应该调用后端API进行搜索，但这里只是一个示例，所以直接显示模拟结果
        var mockResults = [
            '论文标题1 - 摘要：这是一篇关于XX领域的论文。',
            '论文标题2 - 摘要：本文研究了YY方面的问题。',
            '论文标题3 - 摘要：ZZ技术的最新进展。'
        ];

        var resultsHtml = '<ul class="list-group">';
        mockResults.forEach(function(result) {
            resultsHtml += '<li class="list-group-item">' + result + '</li>';
        });
        resultsHtml += '</ul>';

        $('#searchResults').html(resultsHtml);
    }
</script>

</body>
</html>